<template>
  <div>
    <x-collapse expand :title="t['画布配置']" class="px-[16px]">
      <div class="flex justify-between items-center">
        <div class="text-[12px] text-gray-500">{{ t["背景颜色"] }}</div>
        <ColorPicker
          v-model="stageConfig.backgroundColor"
          @change="(color) => (currentStage.backgroundColor = color)"
        ></ColorPicker>
      </div>
      <a-card v-if="stageConfig.lcd" :bordered="false" :body-style="{ padding: '0' }">
        <div class="flex gap-2 mt-3">
          <a-input-number v-model="stageConfig.w" @change="changeWidth">
            <template #prefix> W</template>
          </a-input-number>
          <a-input-number v-model="stageConfig.h" @change="changeHeight">
            <template #prefix> H </template>
          </a-input-number>
        </div>
        <div class="flex justify-between my-8">
          <div>{{ t["是否占位"] }}</div>
          <a-switch v-model="stageConfig.placeholders"></a-switch>
        </div>
      </a-card>

      <a-space class="mt-2" size="medium">
        <a-button @click="setPerfectScale">
          <icon-paste />
        </a-button>
        <a-button @click="stageConfig.scale = 1">
          <icon-original-size />
        </a-button>
        <a-button @click="setChildCenter">
          <icon-refresh />
        </a-button>
      </a-space>
    </x-collapse>
  </div>
</template>

<script lang="ts" setup>
import {
  currentStage,
  setChildCenter,
  setGhostHandle,
  setPerfectScale,
  stageConfig
} from "@/views/paint/modules/data/stage";

const t = translate("公共模块");

watch(stageConfig.value, () => {
  setGhostHandle(stageConfig.value.ghostHandle);
});
const changeWidth = () => {
  currentStage.value.w = stageConfig.value.w;
};

const changeHeight = () => {
  currentStage.value.h = stageConfig.value.h;
};
</script>
